<template>
  <a-table
    ref="tableRef"
    class="base-table"
    bordered
    :custom-row="customRow"
    :loading="loading || columnLoading"
    :scroll="{ y: '100%', ...scroll }"
    :columns="columnData"
    :data-source="dataSourceWithKey"
    :pagination="pagination ? { ...pagination, showSizeChanger: true, pageSizeOptions: ['10', '20', '50', '100', '200'] } : false"
    @resize-column="(w, col) => (col.width = w)"
  >
    <template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
      <slot :name="item" v-bind="data || {}"></slot>
    </template>
    <template #customFilterIcon>
      <BaseIcon name="SettingOutlined" class="text-black" />
    </template>
    <template #customFilterDropdown><ColumnsSetting :column-data="columnData" /> </template>
  </a-table>
</template>

<script setup>
import { ref } from 'vue'

import { computed } from 'vue'
import { useTableColumns, useTableHeight } from './hooks'
import ColumnsSetting from './ColumnsSetting.vue'

const props = defineProps({
  scroll: {
    type: Object,
    default: () => ({})
  },
  customRow: {
    type: Function,
    default: () => ({})
  },
  height: {
    type: Number,
    default: 0
  },
  fill: {
    desc: '是否填充页面剩余高度',
    type: Boolean,
    default: false
  },
  maxFill: {
    desc: '最大高度时才使用填充',
    type: Boolean,
    default: false
  },
  columns: {
    type: Array,
    default: () => []
  },
  dataSource: {
    type: Array,
    default: () => []
  },
  pagination: {
    type: [Object, Boolean],
    default: false
  },
  // rowKey: {
  //   type: String,
  //   default: 'key'
  // },
  columnCode: {
    type: [String, Number],
    default: ''
  },
  excludeColumns: {
    desc: '排除的列',
    type: Array,
    default: () => []
  },

  loading: {
    type: Boolean,
    default: false
  },
  extraHeight: {
    desc: '额外高度（距离底部的高度）',
    type: Number,
    default: 0
  }
})
const dataSourceWithKey = computed(() => {
  return props.dataSource?.map((item) => {
    item.key = item.key || 'key-' + Math.random()
    return item
  })
})
const tableRef = ref(null)
const { columnData, columnLoading } = useTableColumns(props)
const { tableHeight, tableMaxHeight, tablePlaceholderHeight } = useTableHeight(props, tableRef)
// useRowKey(props)
</script>

<style scoped lang="less">
.base-table {
  :deep(.ant-table) {
    border-bottom: 1px solid var(--border-color) !important;
    .ant-table-body {
      height: v-bind(tableHeight);
      max-height: v-bind(tableMaxHeight) !important;
      margin-bottom: -1px;
      border-right: 1px solid var(--border-color) !important;
    }
    .ant-table-footer {
      border-bottom: 0;
    }
  }
}
:deep(.ant-table-empty) {
  border-right: none !important;

  .ant-table-body {
    // overflow-y: auto !important;
  }
  .ant-table-placeholder {
    height: v-bind(tablePlaceholderHeight) !important;
    .ant-table-cell {
      border-bottom: none !important;
      border-inline-end: none !important;
      .ant-table-expanded-row-fixed::after {
        border-inline-end: 0 !important;
      }
    }
  }
  .ant-table-footer {
    border-top: 1px solid var(--border-color) !important;
  }
}
</style>
